<template>
    <el-row>
    <el-col :span="4" :offset="2">
        <div>
            <ClassifyList @ej-xy="zjcc" :classifys="classify" :uid="classifyID"></ClassifyList>
        </div>
    </el-col>
    <el-col :span="16">
        <div>
            <table width="95%" height="40" border="0" align="center" cellpadding="0" cellspacing="0" class="lanmu_xian1">
                <tbody><tr>
                    <td width="24" align="center"><img src="/images/home1.jpg" width="10" height="10"></td>
                    <td><span class="curPosition"><a href="/">首页</a>&nbsp;&gt;&nbsp;<a href="javascript:void(0)">{{news1}}</a>&nbsp;&gt;&nbsp;<a href="javascript:void(0)">{{news2}}</a></span></td>
                </tr></tbody>
            </table>
            <table width="50%" height="12" border="0" align="center" cellpadding="0" cellspacing="0">
                <tbody><tr>
                    <td></td>
                </tr></tbody>
            </table>
            <div v-if="newsbull ==1">
                <DetailsShow :detail="detail"></DetailsShow>
            </div>
            <div v-else>
                <DetailsList @de-ta="deatc" :deails="detail" :classIfyName="news2"></DetailsList>
            </div>
                
        </div>
    </el-col>
    </el-row>
</template>
<style>
.lanmu_xian1 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999999;
     text-align: left;
}
</style>
<script>
import ClassifyList from '@/components/ClassifyList.vue';
import DetailsShow from '@/components/DetailsShow.vue';
import DetailsList from '@/components/DetailsList.vue';
export default {
    name:"NewsCenter",
     data(){
        return{
            newsbull:1,
            classifyID:"",
            detailID:"",
            artiacleId:"",
            classify:[],
            details:{},
            detail:{},
        }
    },
    methods:{
        newsC(){
            this.$http.get(this.$url.state.httpUrl+"detailsClassify/classify",{
                params:{
                    classifyId:this.classifyID
                }
            })
            .then(response=>{
                console.log(response);
                let data = response.data.object;
                this.classify=data;
            })
            .catch(error=>{
                console.log(error);
            })
        },
        newsU(){
                this.$http.get(this.$url.state.httpUrl+"details/getDetails",{
                params:{
                    detailsId:this.detailID,
                }
            })
            .then(response=>{
                console.log(response);
                let data = response.data.object;
                if(data.length == 1){
                    this.detail=data[0];
                    this.newsbull=1;
                }else{
                    this.details=data;
                    if(""==this.artiacleId){
                        this.detail=data;
                        
                        this.newsbull=2;
                    }else{
                        for(var i=1;i<this.details.length;i++){
                                if(this.details[i]==this.artiacleId){
                                        this.details=this.details[i]
                                }
                        }
                    
                    }
                    
                }


            })
            .catch(error=>{
                console.log(error);
            })
        },
        //组件传参
        zjcc(c){
            console.log("C:"+c);
            if(c == this.detailID && this.details != ''){
                 console.log(this.details);
                this.detail = this.details;
                this.newsbull = 2;
            }else{
               this.detailID = c;
                this.newsU();
            }
            
        },
        deatc(d){
            this.detail = d;
            this.newsbull = 1;
        }
    },
    computed:{
        news1(){
            if(this.classify !=""){
                let length = this.classify.length;
                for (let i = 0; i < length; i++) {
                    let classify = this.classify[i];
                    if(this.classifyID == classify.classifyId){
                        return classify.classifyName
                    }
                }
            }
        },
        news2(){
            if(this.classify !=""){
                let length = this.classify.length;
                for (let i = 0; i < length; i++) {
                    let classify = this.classify[i];
                    if(this.detailID == classify.classifyId){
                        return classify.classifyName
                    }
                }
            }
        }
        
    },
    components:{
        ClassifyList,
        DetailsShow,
        DetailsList,
    },
    watch: {
        '$route' (to, from) {
            //刷新参数放到这里里面去触发就可以刷新相同界面了
            this.detailID = this.$route.params.uid;
            this.classifyID = this.$route.params.id;
            this.artiacleId=this.$route.params.detailsId;
            this.newsC();
            this.newsU();
        }
     },
    mounted(){
        this.detailID = this.$route.params.uid;
        this.classifyID = this.$route.params.id;
        this.newsC();
        this.newsU();
    }
}
</script>